<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
// computed: 计算属性
// 
import { ref, reactive, readonly, computed, watch, watchEffect } from 'vue'

const price = ref(100)
const name = ref('张三')

// 侦听器在组合式监听多个值，当做一个数组进行监听
// watch([price, name], (newVal, currVal) => {
//     console.log(newVal, currVal);
// })
// watchPostEffect作用 域是异步的，当数据改变的时候会执行一次，相当于基础版本里加了配置项，flush : 'post'，watchSyncEffect是同理
// watchEffect 和计算属性类似，无需返回值，写在里面的变量都会被监听到
watchEffect(() => {
    console.log('watchEffect', price.value);
    console.log('watchEffect', name.value);
})

</script>

<template>
    <h1>组合式 API</h1>
    <h2>
        {{ price }}
    </h2>
    <button @click="price++">修改</button>

</template>
